<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .profile-menu {
            position: relative;
            display: inline-block;
        }

        .profile-link {
            text-decoration: none;
            display: flex;
            align-items: center;
        }

        .profile-menu .dropdown-menu {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            background-color: white;
            border: 1px solid #ddd;
            box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
            min-width: 80px;
            z-index: 1;
        }

        .profile-menu:hover .dropdown-menu {
            display: block;
        }

        .dropdown-menu a {
            color: black;
            padding: 6px 10px;
            text-decoration: none;
            display: block;
        }

        .dropdown-menu a:hover {
            background-color: #f1f1f1;
        }


    </style>
</head>
<body>
<div class="top-01" style="margin-bottom: 20px;">
    <div class="top-02">
        <ul>
            <li><a href="shops.html"><img src="../static/image/Mi01.png" height="82" width="123" alt="Image 1"/></a></li>
            <li><a style="width: 216px; height: 87px; display: inline-block;"><img src="../static/image/yuan01.png" height="82" width="82" alt="Image 2"/></a></li>
            <li class="search-container">
                <form action="MoHoServlet" method="post">
                    <input type="text" name="name" placeholder="元神降临" style="outline: none">
                    <input type="submit" value="" style="background: url('../static/image/Sou01.png') no-repeat; background-size: 42px 40px; width: 40px; height: 40px; border: none;">
                </form>
            </li>
            <li class="profile-menu">
                <a href="login.jsp" id="head01" class="profile-link">
                    <img src="../static/image/download.webp" height="32" width="32" alt="Profile"/>
                </a>
                <div class="dropdown-menu">
                    <a href="zhiId">个人中心</a>
                    <a href="TuiChuServlet">退出登录</a>
                </div>
            </li>
            <li id="img-01">
                <a href="carImageServlet">
                    <img src="../static/image/buyCarBlock.png" alt="Cart"/>
                    <span style="font-size: 15px; color: #cccccc; margin-left: 5px; border-radius: 0;">购物车</span>
                </a>
            </li>
        </ul>
    </div>
</div>

</body>
</html>
